﻿@page "/components/textarea"

<PageHeader Title="Textarea 多行文本框">
    用于承载用户多行信息录入的组件，常用于描述信息、反馈表单中意见等需要一段相当长文本的场景。可以设置最大文案长度。
</PageHeader>
<HighlightAlert />
<Example Title="基本多行文本框">
    <Description></Description>
    <RunContent>
        <TextArea @bind-Value="Text1" Placeholder="普通多行文本域"/>
        <br />
        <TextArea @bind-Value="Text2" Placeholder="最大行数" Rows="8"/>
        <br/>
        <TextArea @bind-Value="Text3" Placeholder="禁用重定义大小" DisableResize/>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<TextArea bind-Value=""Text1"" Placeholder=""普通多行文本域""/>

<TextArea bind-Value=""Text2"" Placeholder=""最大行数"" Rows=""8""/>

<TextArea bind-Value=""Text3"" Placeholder=""禁用重定义大小"" DisableResize/>
```
")
    </CodeContent>
</Example>
@code{
    string Text1{get;set;}
    string Text2 { get; set; }
    string Text3 { get; set; }
}

<Example Title="不同状态的多行文本框">
    <Description></Description>
    <RunContent>
        <TextArea @bind-Value="ReadonlyText" Placeholder="只读" Readonly />
        <br />
        <TextArea @bind-Value="DisabledText" Placeholder="禁用" Disabled />
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<TextArea bind-Value=""ReadonlyText"" Placeholder=""只读"" Readonly />
        
<TextArea bind-Value=""DisabledText"" Placeholder=""禁用"" Disabled />
```
")
    </CodeContent>
</Example>
@code{
    string ReadonlyText{ get; set; }
    string DisabledText{ get; set; }
}